<template>
    <div class="home-top">
      <h3>人气推荐</h3>
      <div class="content">
        <van-card v-for="item in goodsList" :key="item.id" :tag="item.tag" :price="item.retail_price"
          :origin-price="item.origin_price" :desc="item.goods_brief" :title="item.name" :thumb="item.list_pic_url">
        </van-card>
      </div>
    </div>
  </template>
  
  <script setup>
  const goodsList = [{
    retail_price: '299.00', name: '蚕丝被 正品桑蚕丝',
    goods_brief: '一级桑蚕丝，轻盈、透气、柔软', list_pic_url: '/images/top1.jpg',
    tag: 'TOP1'
  },
  {
    retail_price: '88.00', origin_price: '98.00', name: '儿童摇摇马',
    goods_brief: '安全、不会侧翻、爸妈放心', list_pic_url: '/images/top2.jpg',
    tag: 'TOP2'
  }, {
    retail_price: '128.00',
    origin_price: '168.00',
    name: '可躺可睡休闲懒人沙发',
    goods_brief: '轻松看书、社交、办公、舒适放松',
    list_pic_url: '/images/top3.jpg', tag: 'TOP3'
  }, {
    retail_price: '199.00', origin_price: '205.00', name: '儿童积木 拼装玩具',
    goods_brief: '大颗粒 家长更放心 不易吞咽、安全性高',
    list_pic_url: '/images/top4.jpg', tag: 'TOP4'
  }, {
    retail_price: '89.00', origin_price: '99.00',
    name: '扭扭车 1——3 岁男女宝宝',
    goods_brief: '儿童扭扭车万向轮 防侧翻大人新款摇摆扭扭车', list_pic_url: '/images/top5.jpg',
    tag: 'TOP5'
  }
  ]
  </script>
  
  <style lang="less" scoped>
   .home-top {
     h3 {
       font-size: 22px;
       line-height: 30px;
       text-align: center;
       margin: 0.5rem 0;
     }
  
     .content {
       --van-tag-primary-color: #FF8000;
       --van-card-font-size: 16px;
       --van-card-background: #f9f9f9;
       background: var(--van-card-background);
  
       :deep(.van-card) {
         margin-top: 0;
  
         .van-card title {
           padding: 10px 0 5px;
         }
  
         .van-card price-currency {
           font-size: var(--van-card-font-size);
         }
       }
  
       &::after {
         content: '';
         display: block;
         height: 3rem;
       }
     }
   }
  </style>